<!--
 * @Author: 无聊 7989314+Hwz1997@user.noreply.gitee.com
 * @Date: 2025-07-02 11:01:01
 * @LastEditors: 无聊 7989314+Hwz1997@user.noreply.gitee.com
 * @LastEditTime: 2025-08-30 01:05:03
 * @FilePath: \keep_motion_manger\src\components\filterSearch\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="filter-search">
    <el-form :inline="true" :model="searchForm" class="flex-form">
      <template v-for="(item, index) in searchItems" :key="index">
        <el-form-item :label="item.label" class="form-item">
          <el-input v-if="item.type === 'input'" v-model="searchForm[item.vModel]" />
          <el-select v-else-if="item.type === 'select'" v-model="searchForm[item.vModel]" placeholder="请选择" clearable>
            <el-option
              v-for="option in item.options"
              :key="option.value"
              :label="option.label"
              :value="option.value"
            />
          </el-select>
          <el-date-picker
            v-else-if="item.type === 'date'"
            v-model="searchForm[item.vModel]"
            type="date"
            placeholder="选择日期"
          />
        </el-form-item>
      </template>
      <div class="button-group">
        <el-button type="primary" @click="handleQuery">查询</el-button>
        <el-button @click="handleReset">重置</el-button>
        <!-- 根据传入参数决定是否显示新增按钮 -->
        <el-button v-if="showAddButton" type="success" @click="handleAdd">新增</el-button>
        <!-- 根据传入参数决定是否显示导入按钮 -->
        <el-button v-if="showImportButton" type="success" @click="handleImport">导入</el-button>
        <!-- 根据传入参数决定是否显示导出按钮 -->
        <el-button v-if="showExportButton" type="success" @click="handleExport">导出</el-button>
        <!-- 根据传入参数决定是否显示其他按钮 -->
        <el-button v-if="showOtherButton" type="success" @click="handleOther">{{ otherButtonText }}</el-button>

      </div>
    </el-form>
  </div>
</template>

<script setup>
import './index.css';
import { ref, reactive, onMounted, defineProps, defineEmits } from 'vue';

import { ElDatePicker } from 'element-plus';

import { dictDataApi } from '@/api';

// 定义组件接收的 props
const props = defineProps({
  searchItems: {
    type: Array,
    default: () => []
  },
  showAddButton: {
    type: Boolean,
    default: () => false
  },
  // 新增是否显示导入按钮的参数
  showImportButton: {
    type: Boolean,
    default: () => false
  },
  // 新增是否显示导出按钮的参数
  showExportButton: {
    type: Boolean,
    default: () => false
  },
  // 新增是否显示其他按钮的参数
  showOtherButton: {
    type: Boolean,
    default: () => false
  },
  // 新增其他按钮的文本
  otherButtonText: {
    type: String,
    default: () => '其他'
  }
});

// 定义组件触发的事件
const emits = defineEmits(['query', 'add', 'import', 'export', 'other']);

// 搜索表单数据
const searchForm = reactive({});

// 模拟根据 code 获取下拉框选项
const getOptions = async (code) => {
  // 这里可以根据 code 调用接口获取对应选项
  const res = await dictDataApi.getDictData({code});
  if (res.code === 200) return res.data.rows;
  return [];
};

// 初始化表单数据
const initForm = () => {
  props.searchItems.forEach(item => {
    searchForm[item.vModel] =  item.initialValue !== undefined ? item.initialValue : '';
  });
  handleQuery();
};

// 查询事件
const handleQuery = () => {
  emits('query', searchForm);
};

// 重置事件
const handleReset = () => {
  initForm();
};

// 新增事件
const handleAdd = () => {
  emits('add');
};

// 导入事件
const handleImport = () => {
  emits('import');
};

// 导出事件
const handleExport = () => {
  emits('export', searchForm);
};

// 其他事件
const handleOther = () => {
  emits('other');
}

onMounted(async () => {
  // 先获取所有下拉框的选项
  const optionPromises = props.searchItems
    .filter(item => item.type === 'select')
    .map(async (item) => {
      const options = await getOptions(item.optionsCode);
      item.options = options;
    });

  await Promise.all(optionPromises);

  // 再初始化表单
  initForm();
});
</script>